<template>
  <div>
    <div id="wrapper">
      <!--top-->
      <div class="top-header border-bottom fixed-top" v-if="isTopApp">
        <div class="top-back">
          <a href="javascript:history.go(-1)">返回</a>
        </div>
        <h2 class="f36 color-000">下单</h2>
      </div>
      <template v-if="gameType==1&&goods_source_type==1">
        <div class="member-tab mt-97 pb-200">
          <div class="pro-list border-top p-30 border-bottom bg-fff">
            <a href="#">
              <div class="pro-pic mr-20 bg-f1" v-if="pcEO.TCImagePaths">
                <img :src="pcEO.TCImagePaths[0].ThumbnailUrl">
                <div class="pro-cata">号</div>
                <div class="photoNumBg"></div>
                <div class="photoNum f20 pl-30 color-fff">{{pcEO.TCImagePaths.length}}</div>
              </div>
              <div class="tabPc-title">
                <p class="title2 f30">{{pcEO.Title}}</p>
              </div>
            </a>
          </div>
          <div class="pcOrder01 px-30 bg-fff border-bottom">
            <p class="p1 f32 fl color-000">游戏区服</p>
            <p class="p1 f32 fr color-000">{{pcEO.GameName}}/{{pcEO.GameAreaName}}/{{pcEO.GameServerName}}</p>
          </div>
          <div class="pcOrder01 px-30 bg-fff border-bottom mb-20">
            <p class="p1 f32 fl">帐号价格</p>
            <p class="p1 f32 fr color-m1">￥{{pcEO.SumPrice}}</p>
          </div>
          <template v-if="IncrementItems.length > 0" v-for="(elem, index) in IncrementItems">
            <switchComponent :title="'购买'+elem.Name+'服务'" :price="'￥'+elem.Price" v-model="elem.Show"></switchComponent>
            <transition name="slide-fade">
              <div class="goodslist-03" style=" display:block;" v-if="elem.Show&&elem.DialogShow">
                <!-- top -->
                <div class="top-header border-bottom fixed-top">
                  <div class="top-back ">
                    <a @click="elem.Show=elem.DialogShow=false">返回</a>
                  </div>
                  <h2 class="f32">购买{{elem.Name}}服务</h2>
                </div>
                <div>
                  <div class="separate m-bottom bg-fff">
                    <ul>
                      <li v-for="subElem in elem.NeedInfo">
                        <label>{{subElem.Key}}</label>
                        <div class="separ-lisr">
                          <input class="separate-input" name="" v-model="subElem.Value" :placeholder="'请输入'+subElem.Key" type="text" />
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="separa-conn">
                    <div class="para-titl">{{elem.PageHint}}</div>
                    <div class="para-conn">{{elem.BuyerExplain}}</div>
                  </div>
                  <!-- 固定底部 -->
                  <div class="fixed-button border-top fixed-bottom bg-fff p-30">
                    <div class="redbutton">
                      <a @click="dialogButtonShow(index)">确定</a>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </template>
          <div class="order-container bg-fff f30 border-bottom">
            <i class="tip"></i>
            <span>为确保购买成功，请填写本人的联系方式</span>
          </div>
          <div class="order-container bg-fff f30 border-bottom">
            <span>我的手机号</span>
            <input maxlength='11' type="tel" placeholder="请输入手机号" v-model="buyTel">
          </div>
          <div class="order-container bg-fff f30 border-bottom">
            <span>我的QQ号</span>
            <input maxlength='20' type="number" id="buyQq" placeholder="请输入QQ号" v-model="buyQ" :value="buyQ">
          </div>
          <div class="order-container color-000 bg-fff border-bottom  mt-20" v-if="isAnxin">
            <span class="f32 sec-buy-server">开通安心买服务
              <i class="wenhao1 mt-10" @click="anxinmaiTit()"></i>
            </span>
            <div class="sec-buy mt-20 f30">
              <span class="sec-price">￥{{anxinmaiMon}}</span>
              <div class="fr">
                <i class="chrd-inp" :class="{'selected': closeClass2}" @click="clickAnClass2()"></i>
                <span>不开通</span>
              </div>
              <div class="fr">
                <i class="chrd-inp" :class="{'selected': closeClass1}" @click="clickAnClass1()"></i>
                <span>开通</span>
              </div>
            </div>
            <div class="sec-text mt-20 f22 color-999">开通安心买服务，如若帐号被找回和封号，将优先为您找回帐号或全额退款。费用为订单金额的{{anxinmaiLv}}%
              <router-link to='/vue/help/relieved' tag='a' class="color-m2 f22">查看详情></router-link>
            </div>
          </div>
          <div class="fixed-button3 border-top " data-style="fixed-bottom">
            <div class="redbutton">
              <span>合计：
                <em>￥{{totoalAmount.toFixed(2)}}</em>
              </span>
              <a class="tobuy" :class="{'button-disable':false}" @click="subBotton()">确定</a>
            </div>
          </div>
        </div>
        <!--安心买服务规定-->
        <div class="phlog" id="pop_register" v-if="isAnxinm" @click="isAnxinm = !isAnxinm" style="left: 207px; top: 368px; margin-left: -186px; margin-top: -209px; position: fixed; z-index: 1001; display: block;">
          <div class="pgbis">
            <h2 class="f30 color-000">安心买服务规定</h2>
            <p class="f28">
              鉴于5173作为网络第三方交易平台，仅能对卖家、买家、商品信息进行形式审查，为此5173特引入安心买服务。若卖家、买家任何一方选择了安心买服务，则卖家出售的商品，买家购买该商品出现被卖家找回、被运营商收回、封号等情况，您可以申请安心买服务，安心买保障体系会优先帮您找回帐号或者给予您购买商品的全额退款；并且本网站将根据该用户违规的情节和程度，对违规用户直接作出删除商品信息，限制交易权限甚至冻结用户帐号的处罚。若发生上述情况造成买家损失的，由本网站代卖家先行向买家退还购买上述商品的货款（服务费不退还）</p>
          </div>
        </div>
        <div class="dialog_cover" v-if="isAnxinm" @click="isAnxinm = !isAnxinm"></div>
      </template>
      <template v-else>
        <div class="fixedspace" v-if="isTopApp"></div>
        <set-red-paper :goodsEO="goodsEO" @getPaperInfo="getPaperInfo" v-if="goodsEO.gameId&&goodsEO.gameType==2&&appFrom"></set-red-paper>
        <div class="order-container bg-fff f30 border-bottom">
          <i class="tip"></i>
          <span>为确保购买成功，请填写本人的联系方式</span>
        </div>
        <div class="order-container bg-fff f30 border-bottom">
          <span>我的手机号</span>
          <input maxlength='11' type="tel" placeholder="请输入手机号" v-model="buyTel">
        </div>
        <div class="order-container bg-fff f30 border-bottom">
          <span>我的QQ号</span>
          <input maxlength='20' type="number" id="buyQq" placeholder="请输入QQ号" v-model="buyQ" :value="buyQ">
        </div>
        <!-- 商品保障险判断在这里 -->
        <div class="order-container color-000 bg-fff border-bottom  mt-20" v-if="showCostSaleFee && !appFrom">
          <span class="f32 sec-buy-server">开通商品保障险服务
            <i class="wenhao1 mt-10" style="left: 44%; top: .25rem" @click="showCostSaleFeeDetail=true"></i>
          </span>
          <div class="sec-buy mt-20 f30">
            <span class="sec-price">￥{{costSaleFeePrice}}</span>
            <div class="fr">
              <i class="chrd-inp" :class="{'selected': costSaleFee===false}" @click="costSaleFee=false"></i>
              <span>不开通</span>
            </div>
            <div class="fr">
              <i class="chrd-inp" :class="{'selected': costSaleFee===true}" @click="costSaleFee=true"></i>
              <span>开通</span>
            </div>
          </div>
          <div class="sec-text mt-20 f22 color-999">开通商品保障险服务，如若帐号被找回和封号，将优先为您找回帐号或全额退款。费用为订单金额的{{costSaleFeePercentage}}%</div>
        </div>
        <div class="order-container color-000 bg-fff border-bottom  mt-20" v-if="isAnxin">
          <span class="f32 sec-buy-server">开通安心买服务
            <i class="wenhao1 mt-10" @click="anxinmaiTit()"></i>
          </span>
          <div class="sec-buy mt-20 f30">
            <span class="sec-price">￥{{anxinmaiMon}}</span>
            <div class="fr">
              <i class="chrd-inp" :class="{'selected': closeClass2}" @click="clickAnClass2()"></i>
              <span>不开通</span>
            </div>
            <div class="fr">
              <i class="chrd-inp" :class="{'selected': closeClass1}" @click="clickAnClass1()"></i>
              <span>开通</span>
            </div>
          </div>
          <div class="sec-text mt-20 f22 color-999">开通安心买服务，如若帐号被找回和封号，将优先为您找回帐号或全额退款。费用为订单金额的{{anxinmaiLv}}%
            <router-link to='/vue/help/relieved' tag='a' class="color-m2 f22">查看详情></router-link>
          </div>
        </div>
        <!--底部确认是否发布商品-->
        <div v-if="!isTopApp&&paperInfo.couponNo" id="isAxmprice" class="contaner-qq fw border-bottom fixed-bottom" style=" text-align: center; bottom: 1.35rem;height: 0.7rem;">
          <p class="f24">2.7.0及以上版本才可使用红包，若未升级请及时更新</p>
        </div>
        <div class="release mt-20 trlect-btn border fixed-bottom">
          <a class="next" href="javascript:void(0);">
            <input class="bg-f54" type="button" name="" value="确定" @click="subBotton()">
          </a>
        </div>
        <!--商品保障险规定-->
        <div class="phlog" id="pop_register" v-if="showCostSaleFeeDetail" @click="showCostSaleFeeDetail=false" style="left: 207px; top: 368px; margin-left: -186px; margin-top: -209px; position: fixed; z-index: 1001; display: block;">
          <div class="pgbis">
            <h2 class="f30 color-000">商品保障险服务规定</h2>
            <p class="f28">
              商品保障险是一项为5173用户专项提供的用于保障买家所购买的游戏币、装备、道具、游戏帐号等虚拟财产安全的服务，商品保障险保费由买家承担。如果购买了 "商品保障险" 出现被卖家找回、被运营商收回、封号等情况， 买家可以申请商品保障险服务，商品保障险体系会帮您优先找回或者给予您经济赔偿。
            </p>
          </div>
        </div>
        <!--安心买服务规定-->
        <div class="phlog" id="pop_register" v-if="isAnxinm" @click="isAnxinm = !isAnxinm" style="left: 207px; top: 368px; margin-left: -186px; margin-top: -209px; position: fixed; z-index: 1001; display: block;">
          <div class="pgbis">
            <h2 class="f30 color-000">安心买服务规定</h2>
            <p class="f28">
              鉴于5173作为网络第三方交易平台，仅能对卖家、买家、商品信息进行形式审查，为此5173特引入安心买服务。若卖家、买家任何一方选择了安心买服务，则卖家出售的商品，买家购买该商品出现被卖家找回、被运营商收回、封号等情况，您可以申请安心买服务，安心买保障体系会优先帮您找回帐号或者给予您购买商品的全额退款；并且本网站将根据该用户违规的情节和程度，对违规用户直接作出删除商品信息，限制交易权限甚至冻结用户帐号的处罚。若发生上述情况造成买家损失的，由本网站代卖家先行向买家退还购买上述商品的货款（服务费不退还）</p>
          </div>
        </div>
        <div class="dialog_cover" v-if="isAnxinm" @click="isAnxinm = !isAnxinm"></div>
        <div class="dialog_cover" v-if="showCostSaleFeeDetail" @click="showCostSaleFeeDetail = false"></div>
      </template>
    </div>
  </div>
</template>
<script>
import switchComponent from "components/common/formComponent/switchComponent";
import SetRedPaper from "components/common/redPaper/SetRedPaper.vue";
export default {
  data() {
    return {
      showCostSaleFee: false, // 是否显示商品保障险
      showCostSaleFeeDetail: false, // 是否显示商品保障险描述
      costSaleFee: null, // 商品保障险
      costSaleFeePrice: '', // 商品保障险收费金额
      costSaleFeePercentage: '', // 商品保障险收费比例
      anxinmaiLv: "", //安心买金额利率
      anxinmaiMon: "", //安心买服务费
      buyTel: "", //获取本地cookie电话号码
      goodsId: this.$route.params.goodsId, //获取url里面的goodsId
      gameId: "",
      paperInfo: {},
      goodsType: "",
      price: "",
      goodsEO: {},
      buyQ: "", //做QQ验证
      closeClass2: false,
      closeClass1: false,
      description: "支付描述",
      requirement: "支付要求",
      isAnxin: false,
      isTopApp: this.$route.query.app ? false : true,
      isAnxinm: false,
      goods_source_type: this.$route.params.goods_source_type,
      num: "", //购买数量
      gameType: this.$route.params.gameType,
      IncrementItems: [],
      pcEO: {},
      appFrom: this.$route.query.app ? this.$route.query.app : ""
    };
  },
  components: {
    SetRedPaper,
    switchComponent
  },
  computed: {
    totoalAmount() {
      let price = 0;
      this.IncrementItems.forEach(elem => {
        if (elem.Show) {
          price = price + parseFloat(elem.Price);
        }
      });
      if (this.closeClass1 == true) {
        price = price + this.anxinmaiMon;
      }
      return parseFloat(this.pcEO.SumPrice) + price;
    },
    postInc() {
      let items = [];
      this.IncrementItems.map(elem => {
        if (elem.Show) {
          items.push({
            Id: elem.Id,
            Name: elem.Name,
            NeedInfo: elem.NeedInfo
          });
        }
      });
      return items;
    }
  },
  watch: {
    buyQ: function (Val, oldVal) {
      if (!/^[0-9]*$/.test(Val) || this.buyQ.length > 10) {
        this.buyQ = oldVal; //禁止输入除0-9以外的字符
      }
    },
    IncrementItems: {
      handler(newVal) {
        for (let i = 0; i < newVal.length; i++) {
          if (!newVal[i].DialogShow) {
            newVal[i].OldShow = true;
          }
          if (!newVal[i].Show) {
            newVal[i].DialogShow = true;
            newVal[i].OldShow = false;
          }
          if (newVal[i].Show && !newVal[i].OldShow) {
            newVal[i].DialogShow = true;
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.checkBindMobile();
    this.selectgoodsdetail();
  },
  methods: {
    getPaperInfo(item) {
      this.paperInfo = item;
    },
    dialogButtonShow(index) {
      this.IncrementItems[index].NeedInfo.forEach((elem, inx) => {
        if (!elem.Value) {
          this.$toast({ message: "还有信息没有填哦" });
        } else {
          if (inx == this.IncrementItems[index].NeedInfo.length - 1) {
            this.IncrementItems[index].DialogShow = false;
          }
        }
      });
    },
    anxinmaiTit: function () {
      this.isAnxinm = true;
    },

    selectgoodsdetail: function () {
      var self = this;
      // m 站商品
      if (self.goods_source_type == 0) {
        var pcDuanKou = self.$CONSTANTS.APIGoods + "goods/selectgoodsdetail";
        var typeData = self.$http.get(pcDuanKou, {
          params: { goodsId: self.goodsId }
        });
        typeData.then(function (res) {
          if (res.body.success == true) {
            if (res.body.goodsEO) {
              self.goodsType = res.body.goodsEO.goodsType;
              self.goodsEO = res.body.goodsEO;
              self.num = res.body.goodsEO.unitNum;
              if (res.body.goodsEO.isAxm == true) {
                self.isAnxin = false;
              } else {
                self.GetSafeBuyConfigPc(
                  res.body.goodsEO.gameId,
                  res.body.goodsEO.goodsType,
                  res.body.goodsEO.price
                ); //成功之后调用安心买接口
              }
            } else if (res.body.result) {
              let rst = JSON.parse(res.body.result);
              console.log(rst);
              if (rst.BizResult.ErrorMessage) {
                self
                  .$messagebox({
                    message: "商品状态异常,暂时无法购买",
                    closeOnClickModal: false
                  })
                  .then(action => {
                    history.go(-1);
                  });
              } else if (rst.BizResult.IncrementConfigs) {
                if (rst.BizResult.IncrementConfigs.length > 0) {
                  rst.BizResult.IncrementConfigs.forEach(elem => {
                    self.IncrementItems.push({
                      Show: false,
                      OldShow: false,
                      DialogShow: true,
                      ...elem
                    });
                  });
                }
                if (rst.BizResult.BaoXianType.Key == "买家安心买") {
                  self.isAnxin = true;
                  self.anxinmaiLv = rst.BizResult.BaoXianRate * 100; //安心买利率
                  var pice =
                    parseInt(
                      rst.BizResult.Price * rst.BizResult.BaoXianRate * 10000
                    ) / 10000; //计算安心买费用->下面的判断是用来做安心买费用的限制
                  if (pice < rst.BizResult.BaoXianMinMoney) {
                    self.anxinmaiMon = rst.BizResult.BaoXianMinMoney; //安心买费用最小限制
                  } else if (pice > rst.BizResult.BaoXianMaxMoney) {
                    self.anxinmaiMon = rst.BizResult.BaoXianMaxMoney; //安心买费用最大限制
                  } else {
                    self.anxinmaiMon = pice; //安心买费用
                  }
                  self.anxinmaiMon = self.anxinmaiMon.toFixed(2);
                } else {
                  self.isAnxin = false;
                }
              }
            }
          }
        });
      } else {
        // 手游主站账号商品
        if (self.$route.params.gameType == 2) {
          // 显示商品保障险选择
          this.$http.post(this.$CONSTANTS.APIMGCoin+ 'goods/getGoodsDetail', { bizOfferId: this.goodsId }).then(({ data }) => {
            if (!data.success) return // 请求失败
            // 根据flag中有无 ‘v’,显示或隐藏商品保障险。 如果是找回包赔，则隐藏
            if (data.data.bizOfferFlag == null || data.data.bizOfferFlag.indexOf('v') < 0 || data.data.bizOfferFlag.indexOf('找') > -1) return
            // 获取商品价格
            let price = data.data.price
            this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gameaccount/getBizOfferConfig', { categoryId: data.data.categoryId, gameId: data.data.gameId }).then(({ data }) => {
              if (data.success) {
                let config = data.data.chinaLifeConfigModel
                if (!config.isOpen) return
                let tip = config.chinaLifeRate * price
                if (tip < config.chinaLifeLowerLimit) tip = config.chinaLifeLowerLimit
                else if (tip > config.chinaLifeUpperLimit) tip = config.chinaLifeUpperLimit
                this.costSaleFeePrice = Math.ceil(tip * 100) / 100 // 商品保障险收费金额
                this.costSaleFeePercentage = config.chinaLifeRate * 100 // 收费比例
                this.showCostSaleFee = true // 显示是否开通保险的按钮
              }
            })
          })
        } else if (self.$route.params.gameType == 1) {
          var pcDuanKou =
            self.$CONSTANTS.P30005 +
            "mainGoodsOrderConfig/getAccountOrderConfig";
          var typeData = self.$http.get(pcDuanKou, {
            params: { BizOfferId: self.goodsId }
          });
          self.$http
            .get(
              self.$CONSTANTS.P30005 + "mainGoods/selectpcgoodsdetail",
              { params: { BizOfferId: self.goodsId } }
            )
            .then(
            res => {
              typeData.then(function (res) {
                if (res.body.success == true) {
                  if (res.body.goodsEO) {
                    self.goodsType = res.body.goodsEO.goodsType;
                    self.goodsEO = res.body.goodsEO;
                    self.num = res.body.goodsEO.unitNum;
                    if (res.body.goodsEO.isAxm == true) {
                      self.isAnxin = false;
                    } else if (self.goods_source_type == 0) {
                      //self.isAnxin = true;
                      //self.GetSafeBuyConfig(res.body.goodsEO.gameId, res.body.goodsEO.goodsType, res.body.goodsEO.price);  //成功之后调用安心买接口
                    }
                  } else if (res.body.result) {
                    let rst = JSON.parse(res.body.result);
                    this.BaoXianRate = rst.BizResult.BaoXianRate;
                    this.BaoXianMinMoney = rst.BizResult.BaoXianMinMoney;
                    this.BaoXianMaxMoney = rst.BizResult.BaoXianMaxMoney;
                    console.log(rst);
                    if (rst.BizResult.ErrorMessage) {
                      self
                        .$messagebox({
                          message: "商品状态异常,暂时无法购买",
                          closeOnClickModal: false
                        })
                        .then(action => {
                          history.go(-1);
                        });
                    } else {
                      if (rst.BizResult.IncrementConfigs) {
                        if (rst.BizResult.IncrementConfigs.length > 0) {
                          rst.BizResult.IncrementConfigs.forEach(elem => {
                            self.IncrementItems.push({
                              Show: false,
                              OldShow: false,
                              DialogShow: true,
                              ...elem
                            });
                          });
                        }
                      }
                      if (rst.BizResult.BaoXianType.Key == "买家安心买") {
                        self.isAnxin = true;
                        this.GetSafeBuyConfig();
                      } else {
                        self.isAnxin = false;
                      }
                    }
                  }
                }
              });
              if (res.body.success && res.body.result) {
                let rst = JSON.parse(res.body.result);
                this.GameId = rst.BizResult.GameId;
                this.BasicType = rst.BizResult.BasicType;
                this.price = rst.BizResult.Price;
                console.log(rst);
                if (rst.BizResult.ErrorMessage) {
                  self
                    .$messagebox({
                      message: "商品状态异常,暂时无法购买",
                      closeOnClickModal: false
                    })
                    .then(action => {
                      history.go(-1);
                    });
                } else {
                  self.pcEO = rst.BizResult;
                }
              }
            },
            err => {
              console.log(err);
            }
            );
        }
      }
    },
    //安心买接口
    GetSafeBuyConfigPc: function (gameId, goodsType, price) {
      var self = this;
      self.$http
        .post(
          self.$CONSTANTS.P30005 + "SafeBuyConfigService/GetSafeBuyConfig",
          {
          gameId: gameId,
          goodsType: goodsType
        }
        )
        .then(function (res) {
          if (res.body.success == true) {
            if (res.body.safeBuyConfig && res.body.safeBuyConfig.isEnable) {

              self.isAnxin = true;
              self.anxinmaiLv = res.body.safeBuyConfig.pricePercentBuyer * 100; //安心买利率
              var pice =
                parseInt(
                  price * res.body.safeBuyConfig.pricePercentBuyer * 10000
                ) / 10000; //计算安心买费用->下面的判断是用来做安心买费用的限制
              if (pice < res.body.safeBuyConfig.minPrice) {
                self.anxinmaiMon = res.body.safeBuyConfig.minPrice; //安心买费用最小限制
              } else if (pice > res.body.safeBuyConfig.maxPrice) {
                self.anxinmaiMon = res.body.safeBuyConfig.maxPrice; //安心买费用最大限制
              } else {
                self.anxinmaiMon = pice; //安心买费用
              }
              self.anxinmaiMon = self.anxinmaiMon.toFixed(2);
            } else {
              self.isAnxin = false;
            }
          } else {
            self.isAnxin = false;
          }
        });
    },
    GetSafeBuyConfig: function () {
      var self = this;
      console.log(
        this.GameId,
        this.BasicType,
        this.price,
        this.BaoXianRate,
        this.BaoXianMinMoney,
        this.BaoXianMaxMoney
      );
      self.$http
        .post(
          self.$CONSTANTS.P30005 + "SafeBuyConfigService/GetSafeBuyConfig",
          {
          gameId: this.GameId,
          goodsType: this.BasicType
        }
        )
        .then(function (res) {
          if (res.body.success == true) {
            if (res.body.safeBuyConfig && res.body.safeBuyConfig.isEnable) {
              self.isAnxin = true;
              self.anxinmaiLv = this.BaoXianRate * 100; //安心买利率
              var pice =
                parseInt(this.price * this.BaoXianRate * 10000) / 10000; //计算安心买费用->下面的判断是用来做安心买费用的限制
              if (pice < this.BaoXianMinMoney) {
                self.anxinmaiMon = this.BaoXianMinMoney; //安心买费用最小限制
              } else if (pice > this.BaoXianMaxMoney) {
                self.anxinmaiMon = this.BaoXianMaxMoney; //安心买费用最大限制
              } else {
                self.anxinmaiMon = pice; //安心买费用
              }
              self.anxinmaiMon = Math.ceil(self.anxinmaiMon * 100) / 100;
            } else {
              self.isAnxin = false;
            }
          } else {
            self.isAnxin = false;
          }
        });
    },
    clickAnClass2: function () {
      //安心买选择事件
      this.closeClass2 = true;
      this.closeClass1 = false;
    },
    clickAnClass1: function () {
      //安心买选择事件
      this.closeClass1 = true;
      this.closeClass2 = false;
    },
    subBotton: function () {
      var self = this;
      if ((self.buyQ + "").length < 5) {
        //判断QQ号
        this.$toast("请填写正确QQ号！");
        document.getElementById("buyQq").focus();
        return false;
      }
      if (
        self.closeClass1 == false &&
        self.closeClass2 == false &&
        self.isAnxin == true
      ) {
        //判断安心买是否被选择
        this.$toast("请选择开通安心买服务！");
        return false;
      }
      if (self.buyTel == "") {
        self.$toast("手机号码不能为空！");
        return false;
      } else if (!/^1[34578]\d{9}$/.test(self.buyTel)) {
        self.$toast("手机号码格式有误！");
        return false;
      }
      if(!self.ajax ){
        self.ajax = true
        self.$http.post(self.$CONSTANTS.P30006 + "account/queryCurrentUserInfo").then(function (res) {
          if (res.body.success == true) {
            if (self.goods_source_type == 0) {
              self.create(
                self.buyTel,
                self.buyQ,
                self.goodsId,
                self.goodsType,
                self.num
              );
            } else {
              if (self.$route.params.gameType == 2) { // 手游
                self.createMobileOrder(self.goodsId, self.buyTel, self.buyQ);
              } else if (self.$route.params.gameType == 1) { // 端游
                self.createPcOrder(self.goodsId, self.buyQ);
              }
            }
          } else {
            location.href =
              "/vue/login?returnUrl=" + encodeURIComponent(location.href);
          }
        });
      }
    },
    //手机下单生成订单
    create: function (buyerPhone, buyerQq, goodsId, goodsType, num) {
      var self = this;
      var orderFrom;
      if (this.appFrom) {
        orderFrom = 3; //3表示app
      } else {
        orderFrom = 1; //1表示M站订单
      }
      let postData = {
        buyerPhone: buyerPhone,
        buyerQq: buyerQq,
        buyerWeixin: "",
        description: "支付描述",
        goodsId: goodsId,
        goodsType: goodsType,
        num: num,
        requirement: "支付要求",
        spreadId: this.$route.query.st,
        channelId: self.$getCookie("source") ? self.$getCookie("source") : "", //备用参数->渠道
        history: this.$route.query.channelId,
        //orderSource:1,//订单来源
        orderSource: orderFrom //订单来源
      };
      if (self.paperInfo && self.paperInfo.couponNo) {
        postData = Object.assign(postData, self.paperInfo);
      }
      if (self.isAnxin) {
        if (self.closeClass1) {
          Object.assign(postData, { axmType: 2 });
        }
      }
      self.$http
        .post(self.$CONSTANTS.APIOrder + "order/account/create", postData)
        .then(function (res) {
          if (res.body.success == true) {
            if (
              res.body.orderId.substring(0, 3) == "MAO" ||
              res.body.orderId.substring(0, 3) == "MEO" ||
              res.body.orderId.substring(0, 3) == "MGO"
            ) {
              self.maoMyPay(res.body.orderId);
            } else {
              this.$router.push({
                name: "singlePay",
                params: {
                  orderId: res.body.orderId
                }
              });
            }
          } else {
            self.$toast(res.body.responseStatus.message);
          }
        });
    },
    //pc手游订单创建
    createMobileOrder: function (goodsId, mobilePhone, buyQ) {
      var self = this;
      var orderFrom;
      if (this.appFrom) {
        orderFrom = 3; //3表示app
      } else {
        orderFrom = 2; //2表示M站订单
      }
      var params = {
        bizOfferId: goodsId,
        buyerPhone: mobilePhone,
        buyerQQ: buyQ,
        sourceChannel: orderFrom
      };
      if (self.paperInfo && self.paperInfo.couponNo) {
        params.couponNo = self.paperInfo.couponNo;
        params.couponValue = self.paperInfo.couponValue;
      }
      if (self.$route.query.app) {
        self.$http
          .post(
          self.$CONSTANTS.APIMainGoods + "mainFastSalesAccount/createOrder",
          params
          )
          .then(function (data) {
            if (data.body && data.body.success && data.body.data) {
              data.body.data = JSON.parse(data.body.data);
              self.mobileOrderPay(data.body.data.id);
            } else {
              var message = data.body.responseStatus.message;
              if (message.indexOf("从主站创建订单发生异常") >= 0) {
                message = message.split("从主站创建订单发生异常:")[1];
              }
              if (message.indexOf("红包") >= 0) {
                message = "抱歉，本商品暂不支持该红包";
              }
              self.$toast(message);
            }
            self.ajax  = false
          });
      } else {
        if (this.showCostSaleFee && this.costSaleFee === null) {
          return self.$toast('请选择开通商品保障险服务')
        } else if (this.costSaleFee) {
          params.postSaleFee = 1
        } else {
          params.postSaleFee = 0
        }
        if (self.$route.query.channelId) { // 渠道id
          params.sourceFrom = self.$route.query.channelId; 
        }
        self.$http.post(self.$CONSTANTS.APIMGCoin + "order/createOrder", params).then(function (res) {
          if (res.body.success == true) {
            let orderId = res.body.data
            orderId = JSON.parse(orderId)
            self.mobileOrderPayNew(orderId.id)
          } else {
            self.$toast(res.body.responseStatus.message);
          }
          self.ajax  = false
        })
      }
    },
    createPcOrder(BizOfferId, BuyerQQ) {
      let self = this;
      let params = {
        bizOfferId: BizOfferId,
        buyerQQ: BuyerQQ,
        requestSource:(sessionStorage.getItem('requestSource') ? sessionStorage.getItem('requestSource') : 'msite')
      };
      if (this.postInc.length > 0) {
        Object.assign(params, { incrementItems: JSON.stringify(this.postInc) });
      }
      if (self.isAnxin) {
        if (self.closeClass1) {
          Object.assign(params, { isBuyerAnxinBuy: true });
        }
      }
      this.$http
        .post(
          this.$CONSTANTS.P30005 +
            "mainGoodsAccountOrder/createAccountOrder",
            params
        )
        .then(
        res => {
          if (res.body.success) {
            var json_result = JSON.parse(res.body.result);            
            console.log(json_result);
            if (json_result.BizResult.OrderId) {
              location.href =
                "https://mypay.5173.com/PaymentWap/PayOrderV3.aspx?OrderId=" +
                json_result.BizResult.OrderId +
                "&Key=" +
                json_result.BizResult.Key +
                "&ServiceType=" +
                json_result.BizResult.ServiceType;
            } else {
              this.$toast(json_result.ErrorMessage);
            }
          } else {
            this.$toast(res.body.responseStatus.message);
          }
          self.ajax  = false
        },
        err => {
          console.log(err);
        }
        );
    },
    // 手游合并项目后 专属手游账号支付接口
    mobileOrderPayNew(orderId) {
      this.$http.post(this.$CONSTANTS.APIMGCoin + "pay/orderPay", { orderId, sourceChannel: 2 }).then(({ data }) => {
        location.href = 'https://mypay.5173.com/PaymentWap/PayExternalV2.aspx?' + data.data.payUrl
      })
    },
    mobileOrderPay: function (orderId) {
      var self = this;
      self.$http
        .get(
        self.$CONSTANTS.APIMainGoods + "mainGoodsAccountOrder/mobileOrderPay",
        {
          params: {
            orderId: orderId,
            sourceChannel: "2"
          }
        }
        )
        .then(function (res) {
          if (res.body.success == true) {
            var json_result = JSON.parse(res.body.result);
            //            location.href = "https://mypay.5173.com/PaymentWap/PayExtex?" + json_result.BizResult.Data.payUrl;
            location.href =
              "https://mypay.5173.com/PaymentWap/PayExternalV2.aspx?" +
              json_result.BizResult.Data.payUrl;
          }
        });
    },
    //获取手机号码
    checkBindMobile: function () {
      var self = this;
      self.$http
        .get(self.$CONSTANTS.P30006 + "account/checkBindMobile")
        .then(function (res) {
          if (res.body.success == true) {
            self.buyTel = res.body.mobilePhone
          }
        });
    },
    //手游支付订单
    maoMyPay: function (orderId) {
      var self = this;
      let par = "";
      if (/MicroMessenger/i.test(navigator.userAgent.toLowerCase())) {
        par = {
          orderId: orderId,
          isOffice: 2,
          returnUrl:
          location.protocol +
          "//" +
          window.location.host +
          "/vue/buyerCenter/buyerOrder/mobgoods/" +
          orderId +
          "?from=payed"
        };
      } else {
        par = {
          orderId: orderId,
          isOffice: 1,
          returnUrl:
          location.protocol +
          "//" +
          window.location.host +
          "/vue/buyerCenter/buyerOrder/mobgoods/" +
          orderId +
          "?from=payed"
        };
      }
      self.$http
        .get(self.$CONSTANTS.APIOrder + "payment/mypay", {
          params: par
        })
        .then(function (res) {
          if (res.body.success == true) {
            if (res.body.url != undefined || res.body.url != null) {
              window.location.href = res.body.url;
            } else {
              self.$toast("支付出现问题，请联系客服！")
            }
          } else {
            self.$toast(res.body.responseStatus.message)
          }
        });
    }
  }
};
</script>
<style src='css/common/list-cl.css'></style>
<style src="css/member/member-order.css"></style>
<style src="css/common/publish-cl.css"></style>
<style src="css/order/order-cl.css"></style>
<style scoped>
.slide-fade-enter-active {
  transition: all 0.3s 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.goodslist-03 {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 50;
  min-height: 100vh;
  background: #fff;
}
.separa-conn .para-titl {
  line-height: 0.5rem;
  padding: 0.2rem 0;
  height: auto;
}
</style>
